<template>
  <div>
    <van-contact-list
      :list="list"
      @add="onAdd"
      @edit="onEdit"
      @select="onSelect"
    />
    <!-- 联系人编辑 -->
<van-popup v-model="showEdit" position="bottom">
  <van-contact-edit
    :contact-info="editingContact"
    :is-edit="isEdit"
    @save="onSave"
    @delete="onDelete"
  />
</van-popup>
  </div>
</template>

<script>
import axios from "axios";
import { ContactList, Toast, ContactEdit, Popup } from "vant";
export default {
  data() {
    return {
      list: [{
        name: '张三',
        tel: '13800000000',
        id: 0
      }],
      instance: null,
      showEdit: false,
      editingContact: {},
      isEdit: false
    }
  },
  components: {
      [ContactList.name]: ContactList,
      [ContactEdit.name]: ContactEdit,
      [Popup.name]: Popup
  },
  methods: {
    //获取列表信息
    async getList() {
      let res = await this.$Http.getContactList()
      this.list = res
    },
    //添加联系人;
    onAdd() {
      this.showEdit = true
      this.isEdit = false

    },
    //编辑联系人
    onEdit(info) {
     this.showEdit = true
     this.isEdit = true
     this.editingContact = info
    },
    onSelect() {

    },
    async onSave(info) {
      if(this.isEdit){
        let res = this.$Http.editContact(info)
        Toast('修改成功')
        this.showEdit = false
        //this.getList()
      }else{
        try{
          let res = this.$Http.newContactJson(info)
          Toast('新建成功')
          this.showEdit = false
          console.log('==新建联系人==',res)
        }catch(err){
           console.log(err)
        }
      }
      this.getList()
    },
    //删除记录
    async onDelete(info) {
      try
      {
        let res = await this.$Http.deleteContact(info)
        Toast('删除成功')
        this.showEdit = false
        this.getList()
        console.log('删除....')
      }
      catch(err)
      {
        console.log(err)
      }
 
    }

  },
  //Vue生命周期函数
  created() {
    this.getList()
  }
}
</script>

<style scoped>
.van-contact-list__add{
  z-index: 0;
}
.van-popup {
  height: 100%;
}

</style>